import { FC, useState } from "react"
import DateSelector from "@/components/DateSelector"
import AfterSurical from "./AfterSurical"
import BeforeSurical from "./BeforeSurical"
import ConductSurical from "./ConductSurical"
import styles from "./index.less"
import { Steps } from "antd"
const { Step } = Steps


export interface testReportInter {
  key?: string,
  dates: string
  projectName: string,
  type: string | "1",
  recordStatus: string
  testRequisitionNo: string,
  errorItemNum: string | "0",
  hospDistrictName: string
}

export interface infoListType {
  label: string, value: string, key: string
}


const surgicalRecords: FC = () => {

  /**
   * 枚举步骤条
   */
  enum StepsCurrentList {
    BeforeSurical,
    ConductSurical,
    AfterSurical,
  }

  const [stepsCurrent, setStepsCurrent] = useState<StepsCurrentList>(StepsCurrentList.BeforeSurical)

  let reportList: Array<testReportInter> = [
    {
      key: "1",
      dates: "20210512",
      projectName: "血液化验单",
      type: "1",
      recordStatus: "未出报告",
      testRequisitionNo: "1",
      errorItemNum: "0",
      hospDistrictName: "天河医院"
    },
    {
      key: "2",
      dates: "20210512",
      projectName: "肝功能化验单",
      type: "2",
      recordStatus: "报告异常",
      testRequisitionNo: "2",
      errorItemNum: "0",
      hospDistrictName: "黄埔医院"
    }

  ]
  let statusMap = [
    {
      label: "未出报告",
      color: "#BBBBBB",
      icon: require("@/asstes/hospitalizedInfo/report-none.png"),
    },
    {
      label: "检测合格",
      color: "#2AC592",
      icon: require("@/asstes/hospitalizedInfo/report-pass.png"),
    },
    {
      label: "报告异常",
      color: "#EB6969",
      icon: require("@/asstes/hospitalizedInfo/report-abnormal.png"),
    }
  ]


  /**
   * 渲染列表
   */
  const renderReport = () => {
    return (
      reportList.map((item: testReportInter, index: number) => {
        return (
          <div className={`${styles.recordItem} ${index == 0 ? styles.itemActive : ""}`} key={index}>
            <div className={styles.recordItemTitle}>
              {index + 1}、{item.projectName}
            </div>
            <div className={styles.recordItemDetail}>
              <i />
              <span>{item.projectName}</span>
            </div>
            <div className={styles.recordItemDate}>
              <i />
              <span>{item.dates}</span>
            </div>
          </div>
        )
      })
    )
  }

  return (
    <div className={styles.testReport}>
      <div className={styles.testReportLeft}>
        <DateSelector />
        <div className={styles.reportList}>
          <div className={styles.reportCount}>共6条记录</div>
          <div className={styles.reportItemBox}>
            {
              renderReport()
            }
          </div>
        </div>
      </div>
      <div className={styles.reportRight}>
        <Steps progressDot current={stepsCurrent} className={styles.surgicalRecordStep}>
          <Step title="手术前信息" onClick={() => { setStepsCurrent(StepsCurrentList.BeforeSurical) }} description="" />
          <Step title="手术中信息" onClick={() => { setStepsCurrent(StepsCurrentList.ConductSurical) }} description="" />
          <Step title="手术护理记录" onClick={() => { setStepsCurrent(StepsCurrentList.AfterSurical) }} description="" />
        </Steps>
        <div className={`${stepsCurrent !== StepsCurrentList.BeforeSurical ? styles.activeStep : ""}`}>
          <BeforeSurical />
        </div>
        <div className={`${stepsCurrent !== StepsCurrentList.ConductSurical ? styles.activeStep : ""}`}>
          <ConductSurical />
        </div>
        <div className={`${stepsCurrent !== StepsCurrentList.AfterSurical ? styles.activeStep : ""}`}>
          <AfterSurical />
        </div>
      </div>

    </div >
  )

}

export default surgicalRecords